<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-4
  Time: 上午 09:11
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>小米商城</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <!--
    导入Jquery、请求js、value工具类、input工具类、页面js、页面样式css
    ${pageContext.request.contextPath}:获取当前 web 应用的上下文路径
    -->
    <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
    <!-- 加密 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="${pageContext.request.contextPath}/other/component/crypto-js-master/core.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/aes_key_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/value_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/text_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/input_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/reception_desk/index.js"></script>
    <link href="${pageContext.request.contextPath}/other/style/reception_desk/index.css" rel="stylesheet"
          type="text/css"/>
</head>
<body>
<jsp:useBean id="accountId" scope="request" type="java.lang.String"/>
<jsp:useBean id="name" scope="request" type="java.lang.String"/>
<jsp:useBean id="id" scope="request" type="java.lang.Integer"/>
<!-- jsp:include导入网页导航栏  jsp:param向导航栏传值 -->
<jsp:include page="/WEB-INF/page/reception_desk/navigation_bar.jsp" flush="true">
    <jsp:param name="accountid" value="${accountId}"/>
    <jsp:param name="name" value="${name}"/>
    <jsp:param name="id" value="${id}"/>
</jsp:include>
<div class="body" information-id="${id}" name="${name}" account-id="${accountId}">
    <!-- 页面主体 -->
    <div class="head">
        <div class="product-category">
            <ul>
                <li class="product-type-li" data-ids="10">
                    <a>手机</a>
                    <div class="type-right-img">
                        <img src="http://localhost:8083/resource_packs/images/type_right.png" alt="分类">
                    </div>
                </li>
                <li class="product-type-li" data-ids="14">
                    <a>电视</a>
                    <div class="type-right-img">
                        <img src="http://localhost:8083/resource_packs/images/type_right.png" alt="分类">
                    </div>
                </li>
                <li class="product-type-li" data-ids="22,25">
                    <a>家电</a>
                    <div class="type-right-img">
                        <img src="http://localhost:8083/resource_packs/images/type_right.png" alt="分类">
                    </div>
                </li>
                <li class="product-type-li" data-ids="48,11">
                    <a>笔记本&nbsp;平板</a>
                    <div class="type-right-img">
                        <img src="http://localhost:8083/resource_packs/images/type_right.png" alt="分类">
                    </div>
                </li>
                <li class="product-type-li" data-ids="90,32">
                    <a>出行&nbsp;穿戴</a>
                    <div class="type-right-img">
                        <img src="http://localhost:8083/resource_packs/images/type_right.png" alt="分类">
                    </div>
                </li>
                <li class="product-type-li" data-ids="91,15">
                    <a>耳机&nbsp;音响</a>
                    <div class="type-right-img">
                        <img src="http://localhost:8083/resource_packs/images/type_right.png" alt="分类">
                    </div>
                </li>
                <li class="product-type-li" data-ids="16">
                    <a>健康&nbsp;儿童</a>
                    <div class="type-right-img">
                        <img src="http://localhost:8083/resource_packs/images/type_right.png" alt="分类">
                    </div>
                </li>
                <li class="product-type-li" data-ids="63">
                    <a>生活&nbsp;箱包</a>
                    <div class="type-right-img">
                        <img src="http://localhost:8083/resource_packs/images/type_right.png" alt="分类">
                    </div>
                </li>
                <li class="product-type-li" data-ids="86">
                    <a>智能&nbsp;路由器</a>
                    <div class="type-right-img">
                        <img src="http://localhost:8083/resource_packs/images/type_right.png" alt="分类">
                    </div>
                </li>
                <li class="product-type-li" data-ids="16">
                    <a>电源&nbsp;配件</a>
                    <div class="type-right-img">
                        <img src="http://localhost:8083/resource_packs/images/type_right.png" alt="分类">
                    </div>
                </li>
            </ul>
            <!-- 轮播图 -->
            <div class="carousel">
                <div class="carousel-img">
                    <div class="carousel-subassembly">
                        <div class="more-type-commodity" style="display: none">
                        </div>
                        <div class="control-left-right">
                            <img src="http://localhost:8083/resource_packs/images/carousel_left_%23000.png"
                                 alt="左" class="control-img control-left">
                            <img src="http://localhost:8083/resource_packs/images/carousel_right_%23000.png"
                                 alt="右" class="control-img control-right">
                        </div>
                        <div class="choose-jump">
                            <div class="choose">
                                <div class="jump"></div>
                                <div class="jump"></div>
                                <div class="jump"></div>
                                <div class="jump"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 宣传图+其他功能 -->
            <div class="other-options">
                <div class="options-function">
                    <div>
                        <img src="http://localhost:8083/resource_packs/images/guarantee_service.png"
                             alt="保障服务">
                        <span>保障服务</span>
                    </div>
                    <div>
                        <img src="http://localhost:8083/resource_packs/images/corporate_group_buying.png"
                             alt="企业团购">
                        <span>企业团购</span>
                    </div>
                    <div>
                        <img src="http://localhost:8083/resource_packs/images/f_code_channel.png"
                             alt="F码通道">
                        <span>F码通道</span>
                    </div>
                    <div>
                        <img src="http://localhost:8083/resource_packs/images/rice_noodle_card.png"
                             alt="米粉卡">
                        <span>米粉卡</span>
                    </div>
                    <div>
                        <img src="http://localhost:8083/resource_packs/images/trade_in_the_old.png"
                             alt="以旧换新">
                        <span>以旧换新</span>
                    </div>
                    <div>
                        <img src="http://localhost:8083/resource_packs/images/recharge_your_phone_bill.png"
                             alt="话费充值">
                        <span>话费充值</span>
                    </div>
                </div>
                <div class="promotional-image">
                    <img src="http://localhost:8083/resource_packs/images/xiaomi14_promotional_image.png"
                         alt="小米14宣传图" style="margin-left: 0">
                    <img src="http://localhost:8083/resource_packs/images/xiaomi_tv_promotional_image.jpg"
                         alt="小米电视宣传图">
                    <img src="http://localhost:8083/resource_packs/images/xiaomi_buds_4_pro_promotional_image.png"
                         alt="小米Buds 4 pro 宣传图">
                </div>
            </div>

        </div>
    </div>
    <!-- 商品 -->
    <div class="commodity-background">
        <div class="large-product-categories">
            <!-- 大型宣传图 -->
            <div class="large-promotional-image">
                <img src="http://localhost:8083/resource_packs/images/large-promotiona-image.webp"
                     alt="大型Xiaomi14宣传图"/>
            </div>

            <!-- 手机 -->
            <div class="commodity-type">
                <div class="commodity-type-title">
                    <span>手机</span>
                    <div class="more">
                        <a class="more-title">查看更多</a>
                        <img src="http://localhost:8083/resource_packs/images/more_right.png"
                             alt="更多" class="more-img">
                    </div>
                </div>
                <div class="commodity">
                    <div class="type-commodity-promotional-image">
                        <img
                                src="http://localhost:8083/resource_packs/images/promotional_image_redmi_k70.webp"
                                alt="红米K70">
                    </div>
                    <div class="type-multiple-products">
                        <div class="multiple-products">

                        </div>
                    </div>
                </div>
            </div>

            <!-- 智能穿戴 -->
            <div class="commodity-type">
                <div class="commodity-type-title">
                    <span>智能穿戴</span>
                    <div class="commodity-type-choose" index="1">
                        <a type-id="91">耳机</a>
                        <a type-id="90">手表</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="type-commodity-promotional-image">
                        <img
                                src="http://localhost:8083/resource_packs/images/xiaomi_watch_s3_promotional_image.webp"
                                alt="Xiaomi Watch s3">
                    </div>
                    <div class="type-multiple-products">
                        <div class="multiple-products">

                        </div>
                    </div>
                </div>
            </div>

            <!-- 笔记本/平板 -->
            <div class="commodity-type">
                <div class="commodity-type-title">
                    <span>笔记本/平板</span>
                    <div class="commodity-type-choose" index="2">
                        <a type-id="48">笔记本</a>
                        <a type-id="11">平板</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="type-commodity-promotional-image">
                        <img
                                src="http://localhost:8083/resource_packs/images/redmi_book_14_promotional_image.webp"
                                alt="Redmi Book 14">
                    </div>
                    <div class="type-multiple-products">
                        <div class="multiple-products">

                        </div>
                    </div>
                </div>
            </div>

            <!-- 家电 -->
            <div class="commodity-type">
                <div class="commodity-type-title">
                    <span>家电</span>
                    <div class="commodity-type-choose" index="3">
                        <a type-id="14">电视</a>
                        <a type-id="22">空调</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="type-commodity-promotional-images">
                        <img src="http://localhost:8083/resource_packs/images/xiaomi_tv_6_promotional_image.webp"
                                alt="小米电视6">
                        <img src="http://localhost:8083/resource_packs/images/xiaomi_washer_promotional_image.webp"
                             alt="小米洗衣机" style="margin-top: 10px;">
                    </div>
                    <div class="type-multiple-products">
                        <div class="multiple-products">

                        </div>
                    </div>
                </div>
            </div>

            <!-- 家用电器 -->
            <div class="commodity-type">
                <div class="commodity-type-title">
                    <span>生活电器</span>
                    <div class="commodity-type-choose" index="4">
                        <a type-id="81">电暖器</a>
                        <a type-id="75">扫地机</a>
                        <a type-id="79">空净</a>
                        <a type-id="16">清洁</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="type-commodity-promotional-images">
                        <img src="http://localhost:8083/resource_packs/images/xiaomi_sweeper_s1_promotional_image.webp"
                             alt="小米扫地机 S1">
                        <img src="http://localhost:8083/resource_packs/images/xiaomi_air_purifier_promotional_image.webp"
                             alt="小米空气净化器" style="margin-top: 10px;">
                    </div>
                    <div class="type-multiple-products">
                        <div class="multiple-products">

                        </div>
                    </div>
                </div>
            </div>

            <!-- 厨房电器 -->
            <div class="commodity-type">
                <div class="commodity-type-title">
                    <span>生活电器</span>
                    <div class="commodity-type-choose" index="5">
                        <a type-id="68">净水器</a>
                        <a type-id="50">烟灶</a>
                        <a type-id="59">电饭煲</a>
                        <a type-id="64">微蒸烤</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="type-commodity-promotional-images">
                        <img src="http://localhost:8083/resource_packs/images/xiaomi_sweeper_s1_promotional_image.webp"
                             alt="小米扫地机 S1">
                        <img src="http://localhost:8083/resource_packs/images/xiaomi_air_purifier_promotional_image.webp"
                             alt="小米空气净化器" style="margin-top: 10px;">
                    </div>
                    <div class="type-multiple-products">
                        <div class="multiple-products">

                        </div>
                    </div>
                </div>
            </div>

            <!-- 智能家居 -->
            <div class="commodity-type">
                <div class="commodity-type-title">
                    <span>生活电器</span>
                    <div class="commodity-type-choose" index="6">
                        <a type-id="15">小爱音响</a>
                        <a type-id="88">门锁门铃</a>
                        <a type-id="86">路由器</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="type-commodity-promotional-images">
                        <img src="http://localhost:8083/resource_packs/images/xiaomi_sound_narman_promotional_image.webp"
                             alt="小米 Sound Harman 音响">
                        <img src="http://localhost:8083/resource_packs/images/xiaomi_lock_promotional_image.webp"
                             alt="小米门锁" style="margin-top: 10px;">
                    </div>
                    <div class="type-multiple-products">
                        <div class="multiple-products">

                        </div>
                    </div>
                </div>
            </div>

            <!-- 运动出行 -->
            <div class="commodity-type">
                <div class="commodity-type-title">
                    <span>运动出行</span>
                    <div class="commodity-type-choose" index="7">
                        <a type-id="30">平衡车</a>
                        <a type-id="31">滑板车</a>
                        <a type-id="63">箱包配饰</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="type-commodity-promotional-images">
                        <img src="http://localhost:8083/resource_packs/images/xiaomi_balance_bikes_promotional_image.webp"
                             alt="小米 Sound Harman 音响">
                        <img src="http://localhost:8083/resource_packs/images/xiaomi_treadmill_promotional_image.webp"
                             alt="小米门锁" style="margin-top: 10px;">
                    </div>
                    <div class="type-multiple-products">
                        <div class="multiple-products">

                        </div>
                    </div>
                </div>
            </div>
            <div class="large-promotional-image">
                <img src="http://localhost:8083/resource_packs/images/xiaomi_gel_pen_promotional_image.webp" alt="">
            </div>
        </div>
    </div>
</div>
<!-- jsp:include导入网页尾部  jsp:param向该页面传值 -->
<jsp:include page="/WEB-INF/page/reception_desk/footer_page.jsp" flush="true">
    <jsp:param name="id" value="1"/>
</jsp:include>
</body>
</html>
